<template>
  <div class="contain">
      <h3 class="title">{{newsInfo.title}}</h3>
      <p class="subtitle"> 
          <span>发表时间:{{ newsInfo.add_time }}</span>
          <span>点击次数:{{ newsInfo.click }}</span>
      </p>
      
      <hr>

      <div class="content" v-html="newsInfo.content"></div>
      <comment :id="this.id"></comment>
  </div>
  
</template>

<script>
import content from '../subComponent/content.vue'
import Toast from 'mint-ui'
export default {
  data(){
      return{
          id:this.$route.params.id,
          newsInfo:{}
      }
  },
  created(){
      this.getInfo()
  },
  methods:{
      getInfo(){
         this.$http.get('api/getnew/' + this.id).then(result => {
             if(result.body.status === 0){
                 this.newsInfo = result.body.message[0]
             }
             else{
                 Toast('获取新闻详情失败')
             }
         })
      }
  },
  components:{
      'comment':content
  }
}
</script>

<style lang="scss" scoped>
.contain{
    padding: 0 4px;
    .title{
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
        color: red;
    }
    .subtitle{
        font-size: 13px;
        color: #226aff;
        display: flex;
        justify-content: space-between;
    }
    .content{
        img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>

